import React from 'react'
import AvatarSelector from '../../component/avatar-selector/avatar-selector'
import { NavBar, InputItem, TextareaItem, WhiteSpace, Button, WingBlank } from 'antd-mobile'
import { connect } from 'react-redux'
import { update } from '../../redux/user.redux'

@connect(
  state => state.user,
  { update }
)
class BossInfo extends React.Component {
  constructor () {
    super()
    this.state = {
      title: '',
      company: '',
      money: '',
      desc: '',
      avatar: ''
    }
  }
  handleChange (key, value) {
    this.setState({
      [key]: value
    })
  }
  selectAvatar (img) {
    // console.log(img)
    this.handleChange('avatar', img)
  }
  componentDidUpdate (prevProps) {
    if (this.props.redirectTo && this.props.redirectTo === '/boss') {
      this.props.history.push(this.props.redirectTo)
    }
  }
  render () {
    return (
      <div>
        <NavBar mode='dark'>BOSS完善信息页</NavBar>
        <AvatarSelector selectAvatar={this.selectAvatar.bind(this)}/>
        <WhiteSpace />
        <InputItem onChange={v => this.handleChange('title', v)} placeholder='title'>招聘职位</InputItem>
        <InputItem onChange={v => this.handleChange('company', v)} placeholder='company'>公司名称</InputItem>
        <InputItem onChange={v => this.handleChange('money', v)} placeholder='money'>职位薪资</InputItem>
        <TextareaItem
            title="职位要求"
            placeholder="请详细描述您的要求"
            rows={3}
            autoHeight
            onChange={v => this.handleChange('desc', v)}
          />
        <WhiteSpace />
        <WingBlank>
          <Button type='primary' onClick={() => this.props.update(this.state)}>保存</Button>
        </WingBlank>
      </div>
    )
  }
}

export default BossInfo